<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<meta name="description" content="A simple CZML example showing four satellites in orbit around the Earth, and some ground objects.">
		<meta name="cesium-sandcastle-labels" content="Showcases, DataSources">
		<title>Cesium Demo</title>
		<script type="text/javascript" src="libs/js/Sandcastle-header.js"></script>
		<script type="text/javascript" src="libs/ThirdParty/requirejs-2.1.20/require.js"></script>
		<script type="text/javascript">
			if (typeof require === 'function') {
				require.config({
					baseUrl: 'libs/Source',
					waitSeconds: 120
				});
			}
		</script>
	</head> 
	<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
		<style>
			@import url(libs/templates/bucket.css);
		</style>
		<div id="cesiumContainer" class="fullSize">
			<div id="toolTip"></div>
		</div>
		<div id="loadingOverlay">
			<h1>Loading...</h1>
		</div>
		<div id="toolbar">
			<table class="infoPanel">
				<tbody>
					<tr>
						<td>Left click to add a vertex.</td>
					</tr>
					<tr>
						<td>Right click to start new shape.</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script id="cesium_sandcastle_script">
			function startup(Cesium,DrawAssist) {
				'use strict';
				//Sandcastle_Begin
				var activeShapePoints = [];
				var activeShape;
				var floatingPoint;

				//查看器
				// var viewer = new Cesium.Viewer('cesiumContainer', {
				// 	selectionIndicator: false,
				// 	infoBox: false,
				// 	terrainProvider: Cesium.createWorldTerrain()
				// });
				// 			
				// Grant CesiumJS access to your ion assets
				Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYzllNDhmYS1kNzE1LTRhOWUtOWIzZS1kMmU4ODhiNGQ2NTEiLCJpZCI6MTIxODIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjA0OTQ5ODZ9.VJPGTRjjplXV5xPgr6AFOjIN6xy-ymdxoZDsPWc2T0Q';

				var viewer = new Cesium.Viewer('cesiumContainer');

				var imageryLayer = viewer.imageryLayers.addImageryProvider(
					new Cesium.IonImageryProvider({ assetId: 3 })
				);
				
				 //禁止双击zoom
				viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
				// inint draw helper
				var drawTool = new DrawAssist.Tools(viewer);

				var options = [{
					text: 'Draw Point',
					onselect: function() {
						drawTool.draw('Point');
					}
				},{
					text: 'Draw Lines',
					onselect: function() {
						drawTool.draw('PolyLine');
					}
				}, {
					text: 'Draw Polygons',
					onselect: function() {
						drawTool.draw('Polygon');;
					}
				}, {
					text: 'Draw Circle',
					onselect: function() {
						drawTool.draw('Circle');
					}
				}, {
					text: 'Draw Rectangle',
					onselect: function() {
						drawTool.draw('Rectangle');
					}
				}, {
					text: 'Mesaure line',
					onselect: function() {
						drawTool.measure('MeasureTerrainDistance');
					}
				}, {
					text: 'Mesaure Area',
					onselect: function() {
						drawTool.measureForArea('MeasureTerrainArea');
					}
				}, {
					text: 'Draw Done',
					onselect: function() {
						drawTool.draw('DONE');
					}
				}];

				Sandcastle.addToolbarMenu(options);
				// Zoom in to an area with mountains
				// viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0), new Cesium.Cartesian3(5000.0,
				// 	5000.0, 5000.0));
				// viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
// 
// 				viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(104.06,30.64,349990), new Cesium.Cartesian3(3000.06,3000.64,3400));
// 				viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
// 				viewer.camera.setView({
// 				   orientation:{
// 						heading:Cesium.Math.toRadians(360,0),
// 					}
// 				});
				var lonIncrement = 0.00025;
				var initialLon = 104.06;
				var lat = 30.64;
				var height = 10.0;
				function createModel(url, x, y, height) {
					var position = Cesium.Cartesian3.fromDegrees(x, y, height);
					viewer.entities.add({
						name: url,
						position: position,
						model: {
							uri: url
						}
					});
				}
				
				var target = Cesium.Cartesian3.fromDegrees(initialLon, lat, height);
				var offset = new Cesium.Cartesian3(-70.06,-68.64,6.0908)
				viewer.scene.camera.lookAt(target, offset);
				// crate model on map
				createModel('./static/modelData/CesiumMilkTruck.gltf', initialLon-lonIncrement, lat, height-7.5)
				
				//Sandcastle_Begin
				Cesium.Math.setRandomNumberSeed(1234);
				
				var entities = viewer.entities;
				// 纯色 椭球
				entities.add({
					position : target,
					ellipsoid : {
						radii : new Cesium.Cartesian3(5.0, 5.0, 5.0),
						material : Cesium.Color.fromRandom({alpha : 1.0})
					}
				});
				// 四面小墙
				entities.add({
					wall: {
						// positions: Cesium.Cartesian3.fromDegreesArrayHeights([104.06,30.638, 17.0,
						// 	104.045, 30.64, 17.0, // 上
						// 	104.01, 30.63, 17.0, // 左
						// 	104.045, 30.60, 17.0,
						// 	104.06, 30.638, 17.0 // 下
						// ]),
							positions: Cesium.Cartesian3.fromDegreesArrayHeights([104.06,30.6391, 17.0,
							104.055, 30.64, 17.0, // 上
							104.015, 30.63, 17.0, // 左
							104.055, 30.60, 17.0,
							104.06, 30.6391, 17.0 // 下
						]),						
						material: new Cesium.CheckerboardMaterialProperty({
							repeat: new Cesium.Cartesian2(20.0, 6.0)
						})
					}
				});				
				//viewer.zoomTo(viewer.entities);
				
				//Sandcastle_End
				Sandcastle.finishedLoading();
			}
			if (typeof Cesium !== 'undefined') {
				startup(Cesium,DrawAssist);
			} else if (typeof require === 'function') {
				require(['Cesium','DrawAssist'], startup);
			}
		</script>
	</body>
</html>
